<template>
    <div class="platform-menu">
        <el-form :inline="true" :model="searchForm" size="mini">
            <el-form-item label="名称">
                <el-input v-model="searchForm.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item label="编码">
                <el-input v-model="searchForm.code" placeholder="编码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
                <el-button type="primary" @click="handleReset">重置</el-button>
                <el-button type="primary" @click="listMenuTree">刷新</el-button>
                <el-button type="primary" @click="handleCreate(0, {ukId: 0})">新建</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="tableData"
                style="width: 100%; margin-bottom: 20px;"
                row-key="ukId"
                border
                default-expand-all
                stripe
                size="mini"
                lazy
                :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
                    prop="name"
                    label="名称"
                    width="*"
                    min-width="180">
            </el-table-column>
            <el-table-column
                    prop="code"
                    label="编码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="routing"
                    label="前端路由"
                    width="220">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="类型"
                    width="70">
                <template slot-scope="scope">
                    <el-tag effect="light" type="" v-if="scope.row.type == '0'" size="mini">系统</el-tag>
                    <el-tag effect="light" type="success" v-if="scope.row.type == '1'" size="mini">目录</el-tag>
                    <el-tag effect="light" type="danger" v-if="scope.row.type == '2'" size="mini">菜单</el-tag>
                    <el-tag effect="light" type="warning" v-if="scope.row.type == '3'" size="mini">按钮</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="icon"
                    label="图标"
                    width="50">
                <template slot-scope="scope">
                    <i :class="scope.row.icon" style="font-size: 25px"></i>
                </template>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="70">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == '1'" type="success" size="mini">启用</el-tag>
                    <el-tag v-if="scope.row.status == '0'" type="danger" size="mini">停用</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="sort"
                    label="排序"
                    width="60">
            </el-table-column>
            <el-table-column
                    :formatter="dateFormatter"
                    prop="gmtCreate"
                    label="创建时间"
                    width="140">
            </el-table-column>
            <el-table-column
                    :formatter="dateFormatter"
                    prop="gmtModified"
                    label="修改时间"
                    width="140">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="240">
                <template slot-scope="scope">
                    <el-button
                            :disabled="scope.row.type == '3'"
                            size="mini"
                            @click="handleCreate(scope.$index, scope.row)">新建下级
                    </el-button>
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <dormitory-pagination :parentMethod="listMenu"
                          :pagination="this.$store.state.Navigation.pagination"></dormitory-pagination>
        <el-dialog
                :close-on-click-modal="false"
                title="菜单管理"
                :visible.sync="dialogFormVisible"
                label-width="80px">
            <el-row>
                <el-col :span="12">
                    <el-form ref="form" :model="menuForm" label-width="80px">
                        <el-form-item label="菜单编码">
                            <el-input v-model="menuForm.code"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单名称">
                            <el-input v-model="menuForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="前端路由">
                            <el-input v-model="menuForm.routing"></el-input>
                        </el-form-item>
                        <el-form-item label="菜单类型">
                            <el-select v-model="menuForm.type" placeholder="请选择类型">
                                <el-option label="系统" value="0"></el-option>
                                <el-option label="目录" value="1"></el-option>
                                <el-option label="菜单" value="2"></el-option>
                                <el-option label="按钮" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="菜单图标">
                            <el-select v-model="menuForm.icon" placeholder="请选择图标">
                                <el-option value="el-icon-edit">
                                    <span style="float: left">el-icon-edit</span>
                                    <span style="float: right; color: #8492a6">
                                        <i class="el-icon-edit" style="font-size: 20px"></i>
                                    </span>
                                </el-option>
                                <el-option value="el-icon-share">
                                    <span style="float: left">el-icon-share</span>
                                    <span style="float: right; color: #8492a6">
                                        <i class="el-icon-share" style="font-size: 20px"></i>
                                    </span>
                                </el-option>
                                <el-option value="el-icon-delete">
                                    <span style="float: left">el-icon-delete</span>
                                    <span style="float: right; color: #8492a6">
                                        <i class="el-icon-delete" style="font-size: 20px"></i>
                                    </span>
                                </el-option>
                            </el-select>
                            <i :class="menuForm.icon" style="font-size: 20px"></i>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-select v-model="menuForm.status" placeholder="请选择状态">
                                <el-option label="启用" :value="1"></el-option>
                                <el-option label="停用" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input v-model="menuForm.sort" type="number" min="0" max="90000"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleSave">保存</el-button>
                            <el-button @click="dialogFormVisible = false">取 消</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="12">
                    <el-form ref="form" :model="menuForm" label-width="80px">
                        <el-form-item label="菜单权限">
                            <el-select v-model="menuForm.permissionIds" filterable multiple placeholder="请选择权限"
                                       style="width: 100%">
                                <el-option
                                        v-for="item in this.permissions"
                                        :key="item.ukId"
                                        :label="item.name"
                                        :value="item.ukId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
    import DormitoryPagination from "../../components/DormitoryPagination";
    import {listMenuTree,listMenu, createMenu, updateMenu, deleteMenu} from "../../../../api/platform/menu";
    import {listPermission} from "../../../../api/platform/permission";

    import PageSizeUtils from "../../../../utils/PageSizeUtils";

    export default {
        name: "Menu",
        components: {DormitoryPagination},
        data() {
            return {
                tableData: [],
                dialogFormVisible: false,
                menuForm: {
                    parentId: "",
                    code: "",
                    name: "",
                    routing: "",
                    type: "",
                    icon: "",
                    status: 1,
                    sort: 10000,
                    permissionIds: []
                },
                pType: "",
                permissions: [],
                searchForm: {},
                isUpdate: false
            };
        },
        methods: {
            listMenuTree() {
                listMenuTree(0).then(response => {
                    this.tableData = response.data.menuTree
                }).catch(error => {
                    console.log(error)
                })
            },
            listMenu(current, size) {
                listMenu(this.searchForm, current, size).then(response => {
                    this.tableData = response.data.menus.records
                    PageSizeUtils.setPagination(response.data.menus)
                }).catch(error => {
                    console.log(error)
                })
            },
            handleCreate(index, row) {
                this.isUpdate = false
                this.listPermission()
                this.menuForm = {}
                this.menuForm.parentId = row.ukId
                this.pType = row.type
                this.dialogFormVisible = true;
            },
            handleEdit(index, row) {
                this.isUpdate = true
                this.permissions = []
                this.listPermission()
                this.menuForm = row
                this.pType = row.type
                this.dialogFormVisible = true;
            },
            handleDelete(index, row) {
                deleteMenu(row.ukId).then(response => {
                    this.listMenuTree();
                }).catch(error => {
                    console.log(error)
                })
            },
            handleSearch() {
                listMenu(this.searchForm).then(response => {
                    this.tableData = response.data.menus
                }).catch(error => {
                    console.log(error)
                })
            },
            handleReset() {
                this.searchForm = {}
            },
            handleSave() {
                if (this.isUpdate) {
                    updateMenu(this.menuForm).then(response => {
                        this.listMenuTree()
                        this.dialogFormVisible = false
                    }).catch(error => {
                        console.log(error)
                    })
                } else {
                    createMenu(this.menuForm).then(response => {
                        this.listMenuTree()
                        this.dialogFormVisible = false
                    }).catch(error => {
                        console.log(error)
                    })
                }
            },
            dateFormatter(row, column, cellValue, index, type) {
                let replace = cellValue.replace("T", " ");
                return replace.substring(0, 19);
            },
            listPermission() {
                listPermission(null, 0, 10000).then(response => {
                    this.permissions = response.data.permissions.records
                }).catch(error => {
                    console.log(error)
                })
            }
        },
        created() {
            this.listMenuTree();
        }
    }
</script>

<style scoped>

</style>